// 引入vue
import Vue from 'vue'

// 引入vue里的路由器
import VueRouter from 'vue-router'

import Home from '../layout/Home.vue'
import login from '../views/Login'
import Dash from '../views/Dashboard'

// 调用vue.use方法,相当于安装路由器
Vue.use(VueRouter)

// 定义一个routes数组,里面是所有路由的跳转信息
const routes = [
  // 主页 App.vue
  {
    path: '/',
    component: Home,
    children: [
      // 后台页面
      {
        path: '/',
        component: Dash
      },
      // 商品管理
      {
        path: '/goods',
        name: '商品管理',
        component: () =>
          import(/* webpackChunkName: "goods" */ '../views/Goods'),
        children: [
          // 商品列表
          {
            path: '/goods/list',
            name: '商品列表',
            component: () =>
              import(
                /* webpackChunkName: "goods" */ '../views/Goods/GoodsList.vue'
              )
          },
          // 添加商品
          {
            path: '/goods/add',
            name: '商品添加',
            component: () =>
              import(
                /* webpackChunkName: "goods" */ '../views/Goods/GoodsAdd.vue'
              )
          },
          {
            path: '/goods/edit/:id',
            name: '商品编辑',
            component: () =>
              import(
                /* webpackChunkName: "goods" */ '../views/Goods/GoodsEdit.vue'
              )
          }
        ]
      },
      // 订单管理
      {
        path: '/orders',
        name: '订单信息',
        component: () =>
          import(/* webpackChunkName: "orders" */ '../views/Orders')
      },
      // 可视化数据
      {
        path: '/charts',
        name: '可视化数据',
        component: () =>
          import(/* webpackChunkName: "charts" */ '../views/Charts'),
        children: [
          // 订单详情
          {
            path: '/charts/order',
            name: '订单详情',
            component: () =>
              import(
                /* webpackChunkName: "charts" */ '../views/Charts/Orders.vue'
              )
          },
          // 销量管理
          {
            path: '/charts/SellCount',
            name: '销量管理',
            component: () =>
              import(
                /* webpackChunkName: "charts" */ '../views/Charts/SellCount.vue'
              )
          }
        ]
      },
      // 用户管理
      {
        path: '/users',
        name: '用户管理',
        component: () =>
          import(/* webpackChunkName: "users" */ '../views/Users'),
        children: [
          // 用户列表
          {
            path: '/users/list',
            name: '用户列表',
            component: () =>
              import(
                /* webpackChunkName: "users" */ '../views/Users/UserList.vue'
              )
          },
          // 添加用户
          {
            path: '/users/add',
            name: '添加用户',
            component: () =>
              import(
                /* webpackChunkName: "users" */ '../views/Users/UserAdd.vue'
              )
          },
          // 添加用户
          {
            path: '/users/restpwd',
            name: '添加用户',
            component: () =>
              import(
                /* webpackChunkName: "users" */ '../views/Users/ResetPwd.vue'
              )
          },
          // 个人中心
          {
            path: '/users/my',
            name: '添加用户',
            component: () =>
              import(
                /* webpackChunkName: "users" */ '../views/personal/index.vue'
              )
          }
        ]
      }
    ]
  },
  // 登录页
  {
    path: '/login',
    component: login
  },
  // 所有的不正确的地址，直接跳转404error页
  {
    path: '*',
    redirect: '/error'
  },
  // 错误页 404
  {
    path: '/error',
    component: () =>
      import(/* webpackChunkName: "error" */ '../views/error.vue')
  }

  // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
]

// 定义一个路由器名,将上面的数组传值进去
const router = new VueRouter({
  routes
})
// 根据access_token是否存在来判断是否有登录凭证,进而决定是否可以完成路由跳转,所以这个路由守卫写在index.js里
// 使用路由的导航卫视完成登录拦截功能
router.beforeEach((to, from, next) => {
  // 根据登录之后保存的凭证（token值）就能够知道是否有登录
  // const token = localStorage.getItem('token')
  // 可以直接获取到data对象，需注意，localStorage 里只能保存字符串
  // 然后通过JSON.parse()转换为对象
  const users = localStorage.getItem('users') || '{}'
  const token = JSON.parse(users).access_token
  // 如果taken值存在
  if (token) {
    // 就跳转到相对应的路由
    next()
    // 如果携带的跳转路径是登录页,那么不论是否有taken登录凭证,都可以跳转到登录页
  } else {
    if (to.path === '/login') {
      next()
      // 如果没有token值,并且跳转的不是登录页,则强行跳转至登录页
    } else {
      next('/login')
    }
  }
})

// 导出路由器
export default router
